/* eslint-disable react-hooks/rules-of-hooks */
import React, { useState, useEffect } from "react";
import { invokeAsyncAPi } from "@/xz-fn.js";
import { Button, Modal } from "antd";
import { humanFileSize, roundToDecimal } from "@/utils/numbers";
import Folder from "@/media/model/folder.png";
import ModelIcon from "@/media/model/model-icon.png";
import "./index.css";
const noop = () => false;
const noFun = () => {};
const noData = {};
const App = ({
  openLoadPath = noop,
  hideLoadPath = noFun,
  loadPathInfo = noData,
  modelInfo = noData,
  handleLoad = noFun,
  handleCompress = noFun,
  handleOllama = noFun,
  installInfo = noData,
}) => {
  const [loading, setLoading] = useState(false);
  const [open, setOpen] = useState(false);
  const [freeSpace, setFreeSpace] = useState("0");
  const [installPath, setInstallPath] = useState();
  const handleOk = () => {
    if (loadPathInfo.type === "load") {
      handleLoad({ ...modelInfo, installPath });
    } else if (loadPathInfo.type === "install") {
      handleCompress(installInfo);
    } else if (loadPathInfo.type === "ollama") {
      handleOllama(installInfo);
    }
    setLoading(true);
  };

  const handleCancel = () => {
    setOpen(false);
    hideLoadPath();
  };

  //选择安装路径/文件夹
  const pickFolder = () => {
    invokeAsyncAPi("xz_PickFolder").then((res) => {
      const resPath = res || "";
      setInstallPath(resPath);
      if (loadPathInfo.type === "下载") {
        localStorage?.setItem("loadPath", resPath);
      } else if (loadPathInfo.type === "安装") {
        localStorage?.setItem("install", resPath);
      }
    });
  };

  //获取上次下载，安装的地址
  useEffect(() => {
    // invokeAsyncAPi("xz_get_max_space_volume").then((res) => {
    //   const resPath = res || "";
    //   setInstallPath(resPath);
    //   localStorage?.setItem("installPath", resPath);
    // });
    let resPath = "";
    if (loadPathInfo.type === "下载") {
      resPath = localStorage?.getItem("loadPath");
    } else if (loadPathInfo.type === "安装") {
      resPath = localStorage?.getItem("install");
    }
    setInstallPath(resPath);
  }, [loadPathInfo.type]);

  //获取路径剩余空间大小
  useEffect(() => {
    invokeAsyncAPi("xz_get_current_space_volume", installPath).then((res) => {
      setFreeSpace(roundToDecimal(res) || 0);
    });
  }, [installPath]);

  useEffect(() => {
    setOpen(openLoadPath);
  }, [openLoadPath]);

  return (
    <>
      <Modal
        className="model-set-path"
        open={open}
        title={loadPathInfo.title}
        onOk={handleOk}
        onCancel={handleCancel}
        centered
        width={600}
        footer={[
          <div
            key="foot"
            className="flex items-center justify-end text-[14px] modal-footer"
          >
            <Button
              key="back"
              color="default"
              variant="link"
              className="mr-[12px]"
              onClick={handleCancel}
            >
              取消
            </Button>
            <Button
              key="submit"
              type="link"
              loading={loading}
              onClick={handleOk}
            >
              {loadPathInfo.btnText}
            </Button>
          </div>,
        ]}
      >
        <div className="flex items-center mb-[20px] mt-[24px]">
          <img
            src={modelInfo.logo || ModelIcon}
            alt="Folder"
            className="w-[100px] h-[58px]"
          />
          <div className="flex flex-col  ml-[16px]">
            <p className="text-[14px]">{modelInfo.title}</p>
            <span className="text-[12px] text-theme-modal-des mt-[2px]">
              模型大小 {humanFileSize(modelInfo.size)}
            </span>
          </div>
        </div>

        <div key="load" className="flex justify-between">
          <span className="w-[]72px] mr-[8px]">{loadPathInfo.title}：</span>

          <div className="flex-1 flex flex-col">
            <div
              className="flex items-center justify-between w-full  px-[16px] py-[8px] rounded-[8px] border-[1px] border-[#E5E9EF] cursor-pointer"
              onClick={pickFolder}
            >
              <span>{installPath}</span>
              <img src={Folder} alt="Folder" className="w-[18px] h-[18px]" />
              <input
                type="file"
                id="fileInput"
                style={{ display: "none", opacity: 0 }}
                onChange={(e) => {
                  console.log("Selected file:", e.target.files[0]);
                }}
              />
            </div>

            <div className="flex items-center justify-between w-full  text-[14px] text-[#86909C] mt-[4px]">
              <span>所需空间： {humanFileSize(modelInfo.size)}</span>
              <span>当前空间：{freeSpace}GB</span>
            </div>
          </div>
        </div>
      </Modal>
    </>
  );
};
export default App